<!DOCTYPE html>
<html lang="zh">
<head>
    <title>{block name="title"}{$title|default=''}{if !empty($title)} · {/if}{:sysconf('site_name')}{/block}</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2">
    <link rel="shortcut icon" href="{:sysconf('site_icon')}">
    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/theme/css/iconfont.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/theme/css/console.css?at={:date('md')}">
    {block name="style"}{/block}
    <script>window.tapiRoot = '{:sysuri("admin/index/index",[],false)}'</script>
    <script src="__ROOT__/static/plugs/jquery/pace.min.js"></script>
    <script src="__ROOT__/static/plugs/layui/layui.js"></script>
    <script src="__ROOT__/static/plugs/require/require.js"></script>
    <script src="__ROOT__/static/admin.js"></script>
</head>

{block name='content'}

<form action="{:request()->url()}" autocomplete="off" class="layui-form layui-card" data-auto="true" method="post">
    <div class="layui-card-body padding-40">
        {foreach $questions as $key=>$vo}
        <div class="layui-form-item question">
            <div class="question-title">{$key + 1} . {$vo['title']}</div>
            <div class="question-answer">
                {foreach $vo['answers'] as $index => $answer}
                    <input type="checkbox" name="answer[{$key}][]" value="{$answer['text']}" lay-skin="primary" title="{$answer['text']}" {if $answer.correct}data-correct="true" {/if}>
                {/foreach}
            </div>
            <div class="error-text color-red" id="error-{$key}"></div>

            <br>
        </div>
        {/foreach}

        <div class="layui-form-item text-center">
            <button style="background-color: #5FB878" class="layui-btn floating-button" type="button" id="submitBtn">提 交</button>
        </div>
    </div>
</form>

{/block}

{block name='script'}

<style>
    .floating-button {
        position: fixed;
        bottom: 20px; /* 距离底部的距离，根据需要进行调整 */
        left: 50%; /* 将按钮水平居中 */
        transform: translateX(-50%); /* 水平居中按钮 */
    }
</style>

<script>
    $(document).ready(function() {
        layui.use(['form', 'layer'], function() {
            var form = layui.form;
            var layer = layui.layer;

            $('#submitBtn').click(function() {
                var answers = {};

                $('.question').each(function(index, question) {
                    var questionIndex = $(question).index();
                    answers[questionIndex] = $(question).find('input[type="checkbox"]').map(function() {
                        return {
                            value: $(this).val(),
                            checked: $(this).is(':checked'),
                            correct: $(this).data('correct') === true
                        };
                    }).get();
                });

                var errorCount = 0;

                $.each(answers, function(index, selectedAnswers) {
                    var question = $('.question').eq(index);
                    var hasCorrectAnswer = false;

                    $.each(selectedAnswers, function(i, answer) {
                        if (answer.checked && answer.correct) {
                            hasCorrectAnswer = true;
                            return false;
                        }
                    });

                    if (!hasCorrectAnswer) {
                        errorCount++;
<!--                        question.find('.error-text').text('请选择正确的答案');-->
                    } else {
                        question.find('.error-text').text('');
                    }
                });

                if (errorCount > 0) {
                    window.location.href = "/admin.html?show=answer_question_fail#/data/rework.rework_answer_question/answerQuestionFail.html?show_id=1";
                } else {
                    $(this).closest('form').submit();
                    window.location.href = "/admin.html?show=answer_question_success#/data/rework.rework_answer_question/answerQuestionSuccess.html?show_id=1";
                }
            });
        });
    });
</script>

{/block}